<template>
  <div class="main_app container" v-if="!token">
    <img src="static/images/image.png" >
    <p>请扫码登录后使用</p>
    <div v-loading="!code.qrCodeImg">
      <img class="logo" :src="code.qrCodeImg" >
    </div>
  </div>
  <div v-else class="container">
    <el-tabs v-model="activeName" type="border-card">
      <el-tab-pane label="账户" name="account">
        <div class="account-list">
          <div class="list-item" v-for="item in list" :key="item.wxId" @click="handleOpenAccount(item)">
            <img :src="item.headImg" :alt="item.nickName">
            <div class="item-info">
              <h2>{{item.nickName}}</h2>
              <p>{{item.alias}}</p>
            </div>
          </div>
        </div>        
      </el-tab-pane>
      <el-tab-pane label="我的" name="me">我的</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {getAccountList, getCode, getCodeAsk} from '../../axios/other'
export default {
  name: "app",
  data(){
    return{
      token:'',
      code:{},
      list:[],
      activeName:'account'
    }
  },
  created(){
    const token = localStorage.getItem('authorization')
    this.token = token
    if(token){
      this._getAccountList()
    }else{
      this._getCode()
    }     
  },
  methods:{
    handleOpenAccount(ret){  //  点击了账号
      chrome.runtime.sendMessage({
        type:'loginUser',
        data:ret
      })
    },
    //////       网络请求
    _getCode(){   //   获取二维码
      getCode().then(res=>{
        if(res.code == 200){
          this.code = res.data
          this._getCodeAsk(res.data.code)
        }
      })
    },
    _getCodeAsk(code){  //  轮询二维码
      setTimeout(() => {
        getCodeAsk({code}).then(res=>{
          if(res.code == 200){
            // 二维码状态：0用户未扫码，1登录成功（用户已关注公众号），2二维码已过期，3二维码已被使用
            switch (res.data.status) {
              case 0:
                this._getCodeAsk(this.code.code)
                break;
              case 1:
                this.$message.success('登录成功');
                localStorage.setItem("authorization", res.data.authorization)
                chrome.storage.sync.set({ authorization: res.data.authorization })
                setTimeout(() => {
                  window.location.reload()
                  chrome.tabs.reload()                  
                }, 1000);
                break;
              case 2:
                this.$message.error('二维码已过期');
                this._getCode()
                break;
              case 3:
                this.$message.error('二维码已被使用');
                this._getCode()
                break;
            }
          }
        })            
      }, 2000);  
    },
    _getAccountList(){
      getAccountList().then(res=>{
        if(res.code == 200){
          this.list = res.data
        }
      })
    }
  }
};
</script>

<style lang="less" scoped>
@import url('../../assets/css/reset.css');
.container{
  width: 400px;
  /deep/.el-tabs__header{
    margin: 0;
  }
  /deep/.el-tabs--border-card>.el-tabs__content{
    padding: 0;
  }
}
.main_app{
  text-align: center;
  box-sizing: border-box;
  padding: 40px 0;
  p{
    line-height: 20px;
    margin-bottom: 30px;
  }
  .logo{
    width: 150px;
    height: 150px;
  }
}
.account-list{
  .list-item{
    display: flex;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    &:hover{
      background: #f8f8f8;
    }
    img{
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }
    .item-info{
      margin-left: 15px;
      line-height: 20px;
      h2{
        font-weight: bold;
        font-size: 15px;
      }
    }
  }
}
</style>
